import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:vape_xe/utils/utils.dart';
import 'package:vape_xe/values/values.dart';
import 'package:vape_xe/widgets/get_view_keep_alive.dart';
import 'package:vape_xe/widgets/widgets.dart';

import 'logic.dart';

class ExchangeListView extends GetViewKeepAlive<ExchangeController> {
  final String? id;
  final String modelNum;

  ExchangeListView({super.key, required super.tag, required this.modelNum, this.id}) {
    Get.put(ExchangeController(tag!, modelNum, id), tag: tag);
  }

  Widget _item(int position) {
    return Opacity(
      opacity: controller.productList[position]['state'] == 2 ? 0.5 : 1,
      child: Container(
        padding: EdgeInsets.all(1.w),
        alignment: Alignment.center,
        decoration: controller.productList[position]['isSelected']
            ? BoxDecoration(
                borderRadius: 16.radius,
                gradient: const LinearGradient(colors: [Color(0xffF5B946), Color(0xffF58546)]),
              )
            : const BoxDecoration(),
        child: Container(
          decoration: BoxDecoration(
            color: const Color(0xff191919),
            borderRadius: 16.radius,
          ),
          child: Column(
            children: [
              Padding(
                padding: EdgeInsets.symmetric(vertical: 8.h),
                child: Row(
                  children: [
                    8.vGap,
                    Stack(
                      children: [
                        SizedBox(
                          width: 60.w,
                          height: 60.h,
                        ),
                        Positioned(
                          left: 0,
                          top: 0,
                          bottom: 0,
                          right: 0,
                          child: Container(
                            padding: EdgeInsets.symmetric(vertical: 4.h),
                            child: netImageCached(
                              controller.productList[position]['icon'],
                              width: 60.w,
                              height: 52.w,
                              showProgress: false,
                              showError: false,
                            ),
                          ),
                        ),
                      ],
                    ),
                    8.vGap,
                    Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            controller.productList[position]['name'],
                            style: TextStyle(fontSize: 11.sp, color: Colors.white),
                          ),
                          16.hGap,
                          Row(
                            children: [
                              Image.asset(
                                'assets/images/ic_paopao.webp',
                                width: 14.w,
                                height: 14.w,
                              ),
                              4.vGap,
                              Text(
                                '+${controller.productList[position]['coin']}',
                                style: TextStyle(
                                  fontSize: 16.sp,
                                  fontWeight: FontWeight.bold,
                                  fontFamily: 'Montserrat',
                                  color: Colors.white,
                                ),
                              )
                            ],
                          ),
                          Text(
                            'Profit per hour'.tr,
                            style: TextStyle(fontSize: 9.sp, color: Colors.white30),
                          ),
                        ])
                  ],
                ),
              ),
              Divider(height: 1.h, color: Colors.white10),
              Padding(
                padding: EdgeInsets.symmetric(vertical: 4.h),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(
                      'LV.${controller.productList[position]['level']}',
                      style: TextStyle(
                        fontSize: 12.sp,
                        fontFamily: 'Montserrat',
                        fontWeight: FontWeight.bold,
                        color: AppColors.levelHaloColor[controller.productList[position]['level']],
                      ),
                    ),
                    24.vGap,
                    Text(
                      'Remaining',
                      style: TextStyle(fontSize: 9.sp, color: Colors.white30),
                    ),
                    5.vGap,
                    Text(
                      '13:33:31',
                      style: TextStyle(fontSize: 9.sp, color: Colors.white),
                    )
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Obx(
      () => controller.productList.isEmpty
          ? Center(child: Text('Empty list'.tr))
          : Padding(
              padding: EdgeInsets.symmetric(horizontal: 16.w),
              child: GridView.builder(
                itemCount: controller.productList.length,
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2, // 每一行的列数
                  mainAxisSpacing: 10.h, // 主轴方向上的间距
                  crossAxisSpacing: 8.w, // 交叉轴方向上的间距
                  childAspectRatio: 1.7, // 子项的宽高比
                ),
                itemBuilder: (BuildContext context, int index) {
                  return GestureDetector(
                    onTap: () {
                      Get.dialog(
                        DialogView(
                          message: 'Confirmed replacement for ${controller.productList[index]['name']}?'.tr,
                          onCancelEvent: () {},
                          onConfirmEvent: () {
                            controller.changeVape(index);
                          },
                        ),
                        barrierDismissible: false,
                      );
                    },
                    child: _item(index),
                  );
                },
              ),
            ),
    );
  }
}
